<template>
  <el-container>
    <el-main class="leftMain">
      <device-tree
        :show-tabs="false"
        :show-device-index="false"
        :query-data="queryData"
        :first-action="false"
      ></device-tree>
    </el-main>
    <el-main class="rightMain">
      <bs-main>
        <query-condition slot="header" :query-data="queryData" @allSet="showAllPhysicalSetDialog"></query-condition>
        <list
          ref="list"
          class="center"
          height="calc(100vh - 220px)"
          :list-data="tableData"
          :table-tag="tableName"
          :has-select="true"
          :list-cols="colData"
          :init-cols-props.sync="initColsProps"
          :init-headmune-flag="initHeadmuneFlag"
          :action-opts="actionOpts"
          @init-table="initTable"
          @sort="handleSort"
          @selection-change="handleSelectionChange"
        >
          <template slot="actionSlot" slot-scope="{row}">
            <el-link type="primary" :underline="false" @click="showPhysicalSetDialog(row)" :disabled="linkDisabled">查看屏幕</el-link>
          </template>
        </list>
        <pagination slot="footer" :total="pageData.total" :page="pageData.page" :limit="pageData.limit" :showAllChecked="true" :allChecked="queryData.allSize" @pagination="doList" @all="handleChangeAllSize"></pagination>
      </bs-main>
    </el-main>
    <set-dialog :visible.sync="physicalSetDialog" :terminalId="terminalId" @save="handleSave"></set-dialog>
  </el-container>
</template>

<script>
import QueryCondition from './components/QueryCondition'
import SetDialog from './components/SetDialog'
import DeviceTree from '../../device/components/DeviceTree'
import List from '@/components/List'
import Pagination from '@/components/Pagination'
import ScreenApi from '@/api/screen'

export default {
  data() {
    const headerContextMenus = {
      width: '120px',
      items: [
        'sortUp',
        'sortDown',
        'line',
        'cols'
      ]
    }
    return {
      queryData: {
        queryType: 0,
        allSize: false
      },
      editorForm: {},
      selectedArr: [],
      tableData: [],
      actionOpts: {
        show: true,
        align: 'center',
        width: '120px',
        hidEditBtn: true,
        hidDelBtn: true,
        name:'操作',
        slot: true
      },
      colData: [
        { label: '终端名称',  prop:'name', minwidth:'150', headerContextMenus },
        { label: 'MAC地址',  prop:'macText', minwidth:'150', headerContextMenus },
        { label: '版本',  prop:'swVersion', minwidth:'100', headerContextMenus },
        { label: '车辆编号', prop:'carNo', minwidth:'100', headerContextMenus },
        { label: '车牌号码', prop:'carLicense', minwidth:'100', headerContextMenus },
        { label: '线路', prop:'lineNo', minwidth:'100', headerContextMenus },
        { label: '所属公司', prop:'busCompany', minwidth:'100', headerContextMenus },
        { label: '屏幕数量', prop:'screenCount', minwidth:'100', headerContextMenus }
      ],
      initColsProps: ['name', 'macText', 'swVersion', 'carNo', 'carLicense', 'lineNo', 'busCompany', 'screenCount'],
      pageData: {
        page: 1,
        total: 0,
        limit: 15
      },
      initHeadmuneFlag: false,
      physicalSetDialog: false,
      tableName:'physicalSetScreenTL',
      terminalId: 0,
      terminalIds: [],
      linkDisabled: false
    }
  },
  components: {
    QueryCondition,
    SetDialog,
    DeviceTree,
    List,
    Pagination
  },
  created() {
    this.$eventBus.$on('doList', this.doList)
  },
  beforeDestroy() {
    this.$eventBus.$off('doList')
  },
  mounted: function () {
    this.$nextTick(function () {
      this.doList()
    })
  },
  methods: {
    initTable(config){
      this.initHeadmuneFlag = true
    },
    // 排序
    handleSort(sortInfo) {
      switch(sortInfo.prop) {
        case 'name':
          this.queryData.orderType = 1
          break;
        case 'macText':
          this.queryData.orderType = 2
          break;
        case 'carLicense':
          this.queryData.orderType = 3
          break;
        case 'carNo':
          this.queryData.orderType = 4
          break;
        case 'lineNo':
          this.queryData.orderType = 5
          break;
        case 'busCompany':
          this.queryData.orderType = 6
          break;
        case 'screenCount':
          this.queryData.orderType = 7
          break;
        case 'swVersion':
          this.queryData.orderType = 8
          break;
        default:
          this.$alert('提示', '系统不支持排序')
          return;
      }
      this.queryData.orderParam = sortInfo.type
      this.doList()
    },
    // 查询列表
    async doList(current) {
      if(current) {
        this.pageData = {
          ...this.pageData,
          ...current
        }
      }
      this.queryData.allSize = false
      var queryData = this.$data.queryData
      queryData.current = this.pageData.page
      queryData.size = this.pageData.limit
      const res = await ScreenApi.physicalScreenSetList(queryData)
      if(res) {
        this.tableData = res.records ? res.records : []
        this.pageData.total = Number(res.total? res.total: 0)
      }
    },
    getActiveItem() {
      let items = this.$refs.list.getActiveItem()
      return items.length === 1 ? items[0] : items.length === 0 ? null : items
    },
    showPhysicalSetDialog(item) {
      const param = this.getActiveItem()
      if(param) return
      if(this.queryData.allSize) return
      this.terminalIds = []
      this.terminalId = Number(item.terminalId)
      this.terminalIds.push(this.terminalId)
      this.physicalSetDialog = true
    },
    showAllPhysicalSetDialog() {
      this.terminalIds = []
      const param = this.getActiveItem()
      if(!this.queryData.allSize) {
        if (!param) {
          this.$alert('提示', '请选择终端')
          return
        }
        if(param instanceof Array) {
          param.forEach(item => {
            this.terminalIds.push(Number(item.terminalId))
          })
        } else {
          this.terminalIds.push(Number(param.terminalId))
        }
      }
      this.terminalId = 0
      this.physicalSetDialog = true
    },
    // 取消选择
    toggleSelection() {
      this.$refs.list.clearSelection();
    },
    // 选择所有页
    handleChangeAllSize(val) {
      this.$set(this.queryData, 'allSize', val)
      this.$set(this.queryData, 'total', this.pageData.total)
      this.terminalIds = []
      this.toggleSelection()
      this.linkDisabled = val
    },
    async handleSave(editForm) {
      const items = []
      Object.keys(editForm).forEach(key => {
        const res = editForm[key]
        res.addr = key
        items.push(res)
      })
      if(items.length === 0) {
        return
      }
      const params = {
        ...this.queryData,
        items,
        terminalIds: this.terminalIds
      }
      await ScreenApi.physicalScreenSet(params)
      this.$message.success('设置成功')
      this.$set(this.queryData, 'allSize', false)
    },
    handleSelectionChange(val) {
      this.linkDisabled = val.length === 0 ? false : true
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-tree-node {
    position: relative;
    padding-left: 10px;
}
</style>